<template>
    <view>
        <!-- 订单中心 -->
        <view v-if="pageData.template == 1">
            <view class="card bgwhite">
                <view class="title d-flex a-center" v-if="pageData.title">
                    <view class="size30 color_33 bold flex-1">{{ pageData.title }}</view>
                    <view class="color_82" @click="toUrl('/pages/index/orderList')">查看全部订单</view>
                    <text class="iconfont icon-xiangyouxiayiye h6 color_82"></text>
                </view>
                <view class="p-bot24">
                    <view class="d-inline-block w-20 text-center p-top30" @click="toUrl('/pages/index/orderList')" v-if="!pageData.title">
                        <image class="icon" :src="imgUrl + 'Uploads/diy/userCenter/mainOrder.png'" mode="aspectFit"></image>
                        <view class="color_22 m-top12">我的订单</view>
                    </view>
                    <view
                        class="d-inline-block w-20 text-center p-re"
                        v-for="(item, index) in list1"
                        :key="index"
                        :data-num="orderCount[item.field]"
                        :class="{ unread: parseInt(orderCount[item.field]) > 0 }"
                        @click="toUrl('/pages/index/orderList?status=' + item.status)"
                    >
                        <image class="icon" :src="staticUrl + '/images/jh_up/' + item.img" mode="aspectFit"></image>
                        <view class="color_22 m-top12">{{ item.text }}</view>
                    </view>
                </view>
            </view>

            <!-- 订单状态 -->
            <orderStatus></orderStatus>
        </view>

        <!-- 仓库中心 -->
        <view class="card bgwhite" v-if="pageData.template == 2 && Result.warehouse_mode == 1">
            <view class="title size30 color_33 bold" v-if="pageData.title">{{ pageData.title }}</view>
            <view class="p-bot24" :class="{ 'p-top30': !pageData.title }">
                <view class="d-inline-block w-20 text-center p-re" v-for="(item, index) in list2" :key="index" @click="toUrl(item.path)">
                    <image class="icon" :src="item.img" mode="aspectFit"></image>
                    <view class="color_22 m-top12">{{ item.text }}</view>
                </view>
            </view>
        </view>

        <!-- 分享赚钱 -->
        <view class="card bgwhite" v-if="pageData.template == 3 && configJson.distributionMode != 0">
            <view class="title d-flex a-center" v-if="pageData.title">
                <view class="size30 color_33 bold flex-1">{{ pageData.title }}</view>
                <view class="d-flex a-center" @click="showShareQr = true">
                    <image :src="$online('code.png')" mode="widthFix" class="code m-right10"></image>
                    <view class="color_82">推广海报</view>
                </view>
            </view>
            <view class="p-bot24" :class="{ 'p-top30': !pageData.title }">
                <view class="d-inline-block w-20 text-center" v-for="(item, index) in list3" :key="index" @click="toUrl(item.path)">
                    <image class="icon" :src="item.img" mode="aspectFit"></image>
                    <view class="color_22 m-top12">{{ item.text }}</view>
                </view>
            </view>
        </view>

        <SharePoster v-if="showShareQr" myid=" " type="1" pageType="0" @closePoster="showShareQr = false"></SharePoster>

        <!-- 常用功能 -->
        <view class="card bgwhite" v-if="pageData.template == 4">
            <view class="title size30 color_33 bold" v-if="pageData.title">{{ pageData.title }}</view>
            <view :class="{ 'p-top30': !pageData.title }">
                <block v-for="(item, index) in finalList" :key="index">
                    <!-- 特殊处理 -->
                    <block v-if="item.path == '/userPage/distributors/fenxiaoCenter?state=0'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="configJson.distributionMode != 0 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <block v-else-if="item.path == '/answer/curriculum'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="Result.courseGoodsCount > 0 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <block v-else-if="item.path == '/userPage/user/aboutUs'">
                        <view class="gridItem" @click="toUrl(item.path + '?listId=' + Result.about_us_list_id)" v-if="Result.about_us_list_id && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <block v-else-if="item.path == '/userPage/Install/Install'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="Result.isDispatchStaff == 1 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                            <!-- Result.isDispatchStaff_name -->
                        </view>
                    </block>
                    <block v-else-if="item.path == '/privatePage/index/index'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="userinfo.is_private_member == 1 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <!--  1区域代理  2推荐分享关联 -->
                    <!-- 销售代理-->

                    <block v-else-if="item.path == '/joinPage/proxyStore'">
                        <view class="gridItem" @click="toProxyStore(item)" v-if="userinfo.agent_id > 0 && userinfo.agent_type == '2' && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <!-- 区域代理商 -->
                    <block v-else-if="item.path == '/joinPage/agentCenter'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="userinfo.agent_id > 0 && item.show && userinfo.agent_type == '1'">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>

                    <block v-else-if="item.path == '/joinPage/installOrders'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="userinfo.is_dispatch_manager == 1 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <!-- 笑哈哈 -->
                    <block v-else-if="item.path == '/userPage/xiaohaha/index'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="Result.directSalesUid > 0 && item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <block v-else-if="item.path == '/Releases/Team'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="Result.isTeamUser == 1 && item.show">
                                                       
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                                                       
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>

                    <!-- 泵能通 -->
                    <block v-else-if="item.path == '/joinPage/addStore?is_me=0&agent_form=1'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="userinfo.agent_form == 1">
                                                       
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                                                       
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                    <!-- 泵能通 前置仓-->
                    <block v-else-if="item.path == '/beforeHouse/house'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="userinfo.main_agent_form == 1">
                                                       
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                                                       
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>

                    <!-- 推客团队入口 -->
                    <block v-else-if="item.path == '/weiDian/userHome'">
                        <view class="gridItem" @click="toUrl(item.path)" v-if="Result.isTeamUser == 1">
                                                       
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                                                       
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>

                    <block v-else>
                        <view class="gridItem" @click="toUrl(item.path)" v-if="item.show">
                            <image class="icon" :src="item.img" mode="aspectFit"></image>
                            <view class="color_22 m-top12">{{ item.text }}</view>
                        </view>
                    </block>
                </block>

                <view class="gridItem" @click="open" v-if="Result.warehouse_mode == 1 && userinfo.refund_num > 0">
                    <image class="icon" :src="imgUrl + 'Uploads/diy/userCenter/refund.png'" mode="aspectFit"></image>
                    <view class="color_22 m-top12">退押金</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import orderStatus from '@/components/User/orderStatus.vue';
    import SharePoster from '@/components/sharePoster.vue';
    import { mapState, mapMutations } from 'vuex';

    const base = 'http://sraimgcdn2.mogoie.com/Uploads/diy/userCenter/';
    export default {
        props: ['pageData', 'orderCount', 'Result', 'userinfo', 'configJson'],
        data() {
            return {
                staticUrl: this.staticUrl,
                imgUrl: this.imgUrl,
                showShareQr: false,
                list1: [
                    {
                        text: '待支付',
                        img: 'icon-daifukuan.png',
                        status: 0,
                        field: 'unpay'
                    },
                    {
                        text: '待收货',
                        img: 'icon-daifahuo.png',
                        status: 3,
                        field: 'delivery'
                    },
                    {
                        text: '待评价',
                        img: 'icon-daipingjia.png',
                        status: 4,
                        field: 'comment'
                    },
                    {
                        text: '已评价',
                        img: 'icon-yipingjia.png',
                        status: 5
                    },
                    {
                        text: '退款/售后',
                        img: 'icon-tuikuan.png',
                        status: 6,
                        field: 'refund'
                    }
                ],
                list2: [
                    {
                        text: '我的仓库',
                        img: base + 'myRoom.png',
                        path: '/warehouse/house'
                    }, // noPayOrde['availableGoodsCount']
                    {
                        text: '待发货',
                        img: base + 'unshipped.png',
                        path: '/warehouse/house?status=3'
                    },
                    {
                        text: '待收货',
                        img: base + 'unreceived.png',
                        path: '/warehouse/house?status=4'
                    },
                    {
                        text: '已使用',
                        img: base + 'used.png',
                        path: '/warehouse/house?status=2'
                    },
                    {
                        text: '赠送记录',
                        img: base + 'giftRecord.png',
                        path: '/warehouse/giftrecord'
                    }
                ],
                list3: [
                    {
                        text: '分销中心',
                        img: base + 'distribution.png',
                        path: '/userPage/distributors/fenxiaoCenter'
                    },
                    {
                        text: '我的会员',
                        img: base + 'friend.png',
                        path: '/moneyPage/distributors/myFans'
                    },
                    {
                        text: '分销订单',
                        img: base + 'suborder.png',
                        path: '/moneyPage/distributors/fenxiaoOrder'
                    },
                    {
                        text: '佣金明细',
                        img: base + 'commission.png',
                        path: '/moneyPage/capital/brokerage_list'
                    },
                    {
                        text: '去提现',
                        img: base + 'withdraw.png',
                        path: '/moneyPage/capital/withdraws'
                    }
                ],
                list4: [
                    {
                        text: '客服中心',
                        img: base + 'service.png',
                        path: 'customerService',
                        show: true
                    },
                    {
                        text: '地址管理',
                        img: base + 'address.png',
                        path: '/orderPage/Addresslist/Addresslist',
                        show: true
                    },
                    {
                        text: '分享赚钱',
                        img: base + 'share.png',
                        path: '/userPage/distributors/fenxiaoCenter?state=0',
                        show: true
                    },
                    {
                        text: '我的预约',
                        img: base + 'myReserve.png',
                        path: '/pages/reserve/myRreserve',
                        show: true
                    },
                    {
                        text: '我的评价',
                        img: base + 'myReview.png',
                        path: '/commentPage/comment/myComment',
                        show: true
                    },
                    {
                        text: '我的课程',
                        img: base + 'myCourse.png',
                        path: '/answer/curriculum',
                        show: true
                    },
                    {
                        text: '关于我们',
                        img: base + 'aboutUs.png',
                        path: '/userPage/user/aboutUs',
                        show: true
                    },
                    {
                        text: '派单',
                        img: base + 'dispatch.png',
                        path: '/userPage/Install/Install',
                        show: true
                    },
                    {
                        text: '私域运营',
                        img: base + 'operation.png',
                        path: '/privatePage/index/index',
                        show: true
                    }
                ]
            };
        },
        computed: {
            ...mapState(['vid', 'startUp', 'bid']),
            finalList() {
                if (this.pageData.list) {
                    return this.pageData.list;
                } else {
                    return this.list4;
                }
            }
        },
        components: {
            orderStatus,
            SharePoster
        },
        created() {
            // 数据处理
            if (this.pageData.template == 1) {
                if (this.startUp.delivery == 2) {
                    this.list1[1].text = '待核销';
                    this.list1[1].img = 'icon-daihexiao.png';
                }
                if (!this.pageData.title) this.list1.splice(3, 1);
            }
            if (this.pageData.template == 2 && !this.pageData.title) {
                this.list2[0].img = this.imgUrl + 'Uploads/diy/userCenter/mainRoom.png';
            }
        },
        methods: {
            ...mapMutations(['setHomeKefu']),
            toUrl(url) {
                if (!this.vid) return this.$emit('openModal');
                if (url == 'customerService') return this.showKefu_();
                uni.navigateTo({
                    url
                });
            },
            showKefu_() {
                if (this.configJson.serviceImg) {
                    this.toUrl('/userPage/user/introduce?type=2');
                } else {
                    this.setHomeKefu({
                        showKefu: true
                    });
                }
            },
            open() {
                this.$emit('openDeposit');
            },
            toProxyStore(Item) {
                if (this.bid == 'yI3mwcRcUPnmt*vTgh1bsA==') {
                    this.toUrl(`/joinPage/proxyStore`);
                } else {
                    this.toUrl(`/joinPage/proxyStore?agent_id=${this.userinfo.agent_id}`);
                }
            }
        }
        // watch: {
        // 	userinfo(newVal, old) {
        // 		console.log(newVal, 'newVal');
        // 	}
        // }
    };
</script>

<style lang="scss" scoped>
    .card {
        margin: 24rpx;
        border-radius: 12rpx;

        .title {
            padding: 24rpx 24rpx 40rpx 24rpx;
        }

        .gridItem {
            display: inline-block;
            width: 20%;
            text-align: center;
            margin-bottom: 24rpx;
        }

        .icon {
            width: 50rpx;
            height: 50rpx;
        }

        .code {
            width: 30rpx;
            background: #999;
        }
    }
</style>
